<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/client/header::header(null,null)" />
<body>
<div class="am-g am-g-fixed blog-fixed index-page">
    <div class="am-u-md-8 am-u-sm-12">




        <!-- 文章遍历并分页展示 : 需要同学们手动完成，基本样式已经给出，请使用th标签及表达式完成页面展示 -->
        <div th:each="article:${result.list}">
            <article class="am-g blog-entry-article">

                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color"style="font-size: 15px;"><a th:text="${article.categories}">默认分类</a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" th:text="'发布于 ' + ${article.created}" />
                    <h2>
                        <!-- 文章标题 -->
                        <div><a style="color: #0f9ae0;font-size: 20px;" th:text="${article.title}" />
                        </div>
                    </h2>
                    <!-- 文章内容-->
                    <div style="font-size: 16px;" th:text="${article.content}" />
                </div>
            </article>
        </div>




    </div>
    <!-- 博主信息描述 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>子慕</span></h2>
            <img th:src="@{/assets/img/me.jpg}" alt="about me" class="blog-entry-img"/>
            <p>
                Java后台开发
            </p>
            <p>个人博客小站，主要发表关于Java、Spring、Docker等相关文章</p>
        </div>
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
            <p>
                <a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                <a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
            </p>
        </div>
    </div>

</div>
<div class="ui_tb_h30">
    <div class="ui_flt" style="height: 30px; line-height: 30px;">
        共有
        <span class="ui_txt_bold04" th:text="${result.total}">90</span>
        条记录，当前第
        <span class="ui_txt_bold04" th:text="${result.pageNum} + '/' + ${result.pages}">1
						/
						9</span>
        页
    </div>
    <div class="ui_frt">
<!--        <input type="button" value="首页" class="ui_input_btn01" th:href="'/article/list?pageSize=' + ${result.pageSize} + '&pageNo=' + ${result.firstPage}"/>-->
<!--        <input type="button" value="上一页" class="ui_input_btn01" th:if="${result.hasPreviousPage}" th:href="'/article/list?pageSize=' + ${result.pageSize} + '&pageNo=' + ${result.prePage}"/>-->
<!--        <input type="button" value="下一页" class="ui_input_btn01" th:if="${result.hasNextPage}" th:href="'/article/list?pageSize=' + ${result.pageSize} + '&pageNo=' + ${result.nextPage}"/>-->
<!--        <input type="button" value="尾页" class="ui_input_btn01" th:href="'/article/list?pageSize=' + ${result.pageSize} + '&pageNo=' + ${result.lastPage}"/>-->
        <a th:href="'/index?pageSize=' + ${result.pageSize} + '&pageNo=' + ${result.firstPage}">首页</a>
        <a th:if="${result.hasPreviousPage}" th:href="'/index?pageSize=' + ${result.pageSize} + '&pageNo=' + ${result.prePage}">上一页</a>
        <a th:if="${result.hasNextPage}" th:href="'/index?pageSize=' + ${result.pageSize} + '&pageNo=' + ${result.nextPage}">下一页</a>
        <a th:href="'/index?pageSize=' + ${result.pageSize} + '&pageNo=' + ${result.lastPage}">尾页</a>
    </div>
</div>
</div>
</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer" />
<script>
    /** 输入页跳转 **/
    function jumpInputPage(totalPage){
        // 如果“跳转页数”不为空
        if($("#jumpNumTxt").val() != ''){
            var pageNum = parseInt($("#jumpNumTxt").val());
            // 如果跳转页数在不合理范围内，则置为1
            if(pageNum<1 | pageNum>totalPage){
                art.dialog({icon:'error', title:'友情提示', drag:false, resize:false, content:'请输入合适的页数，\n自动为您跳到首页', ok:true,});
                pageNum = 1;
            }
            $("#submitForm").attr("action", "house_list.html?page=" + pageNum).submit();
        }else{
            // “跳转页数”为空
            art.dialog({icon:'error', title:'友情提示', drag:false, resize:false, content:'请输入合适的页数，\n自动为您跳到首页', ok:true,});
            $("#submitForm").attr("action", "house_list.html?page=" + 1).submit();
        }
    }
</script>
</html>
